<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="js/template7.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        #app {
            max-width: 800px;
            margin: 0 auto;
        }

        #search {
            margin-bottom: 20px;
        }

        #search input[type="search"] {
            padding: 5px;
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        #search button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        #listshow {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #listshow li {
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }

        #page a {
            padding: 5px 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            text-decoration: none;
            margin-right: 5px;
        }

        #page span {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
            margin-right: 5px;
        }
    </style>

<body>
    列表页
    <div id="app">
        <div id="search">
            <form>
                <input type="search" value="搜索一下"><button type="submit">搜索</button>
            </form>
        </div>
        <div id="list">
            <ul id="listshow">
                
            </ul>
        </div>
        <div id="page">
            <a>首页</a>
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>尾页</a>
        </div>
    </div>

    <script id="list_tpl" type="text/template7">
        {{#each list}}
        <li>
            <div>
                {{title}}
            </div>
        </li>
        {{/each}}
    </script>
    <script id="page_tpl" type="text/template7">

        {{#js_if "this.isFirstPage"}}
        <span>首页</span>
        {{else}}
        <a href='javascript:void(0);' onclick='page(1);'>首页</a>
        {{/js_if}}

        {{#js_if "this.hasPreviousPage"}}
        <a href='javascript:void(0);' onclick='page({{prePage}});'>上一页</a>
        {{/js_if}}

        {{#each navigatepageNums}}        
        {{#js_if "@root.pageNum == this"}}
        <span>{{this}}</span>
        {{else}}
        <a href='javascript:void(0);' onclick='page({{this}});'>{{this}}</a>
        {{/js_if}}        
        {{/each}}

        {{#js_if "this.hasNextPage"}}
        <a href='javascript:void(0);' onclick='page({{nextPage}});'>下一页</a>
        {{/js_if}}

        {{#js_if "this.isLastPage"}}
        <span>尾页</span>
        {{else}}
        <a href='javascript:void(0);' onclick='page({{pages}});'>尾页</a>
        {{/js_if}}

        <span>总页数:{{pages}} 总记录数:{{total}}</span>
    </script>
    <script>
        function reqAjax(_url, _parm, _type, _callback) {
            if (_type == null) _type = "post"; 
            let loading = layer.load();
            $.ajax({
                url: _url,
                //data: JSON.stringify({ id: this.value, status: operate }),
                data: _parm,
                dataType: 'json', 
                //contentType: 'application/json',
                type: _type,
                success: function (result) {
                    layer.close(loading); 
                    if (result.code == 200) {  
                        //popup.success(result.msg);
                        //layer.msg(result.msg);
                        if (_callback) { _callback(result.data); }
                    } else {
                        //popup.failure(result.msg);
                        layer.msg(result.msg);
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        let loadListData = function (page) {
            if(page==null)page=1;
            reqAjax('http://localhost:8082/hm/api/list', { page: page }, "post", function (result) {
                console.log(result);
                //列表数据
                var template = $('#list_tpl').html();
                var compiledTemplate = Template7.compile(template);
                var html = compiledTemplate(result);
                $("#listshow").html(html);

                //分页数据
                var page_tpl = $('#page_tpl').html();
                var compiledTemplate = Template7.compile(page_tpl);
                var html = compiledTemplate(result);
                $("#page").html(html);

            });
        }

        let page = function(page){
            loadListData(page);
        }

        loadListData();

        //注册 t7的方法
        Template7.registerHelper('page', function(p){
            page(p);
        });
    </script>
</body>

</html>